// 加载分类数据
var form = layui.form;
var layer = layui.layer;
$.ajax({
    url: "/my/article/cates",
    success: function(res) {

        if (res.status == 0) {
            // 初始化默认空选项
            var str = `<option value="">空</option>`;
            // 遍历数据：累加
            $.each(res.data, function(index, item) {
                str += `<option value="${item.Id}">${item.name}</option>`;
            });
            // 设置HTML结构
            $("select").html(str);

            // 现在：基于layui.form 
            // 特性：更新渲染；layui语法规定  了解；
            form.render('select');
        }
    }
});
initEditor();



// 图片裁剪区 cropper
// 初始化插件
$('#image').cropper({
    // 宽高比例
    aspectRatio: 400 / 280,
    // 预览区容器的类名
    preview: '.img-preview'
});

// 本来样式很丑,用好看按钮去代替
$(".selecBtn").click(function() {
    $("#file").click();
});

// 给#file 注册change事件，当图片改变时，触发下面函数：
// 文件域的内容改变的时候，更换剪裁区的图片
$('#file').change(function() {
    // 3.1 先找到文件对象
    var fileObj = this.files[0];

    // 3.2 JS语法内置URL构造函数：为选择的图片生成一个临时的url
    var url = URL.createObjectURL(fileObj);

    // 3.3 使用cropper插件配置方法，替换地图地址！
    $('#image').cropper("replace", url);
});



// 发布文章

$("form").on("submit", function(e) {
    e.preventDefault();
    var fd = new FormData(this);

    var val = tinyMCE.activeEditor.getContent();
    fd.append("content", val);
    let canvas = $('#image').cropper('getCroppedCanvas', {
        width: 400,
        height: 280
    });
    canvas.toBlob(function(imgObj) {
        // 参数：帮助我们获取裁剪后图片的对象！
        fd.append("cover_img", imgObj);

        $.ajax({
            url: "/my/article/add",
            type: "POST",
            data: fd,
            // 固定的：JQ ajax提交formData数据，语法要求！ajax day03最后一个视频
            processData: false, // 默认进行url编码，不用了！
            contentType: false, // 默认url编码，不用了！
            success: function(res) {
                layer.msg(res.message);
                if (res.status == 0) {

                    location.href = "/article/list/list.html";


                    var dd = window.parent.document.querySelector("#articleList");
                    $(dd).addClass("layui-this");
                    $(dd).next().removeClass("layui-this"); // 下一个兄弟元素




                }
            }
        })
    });




})